<template>
    <div class="quality-check-resultAppeal">
      <div style="width: 100%;">
        <el-form labelPosition="top" :inline="true" :model="appealform" ref="appealform"  class="form-inline form-inline">
          <el-row :gutter="20">
            <el-col :span="6">
              <el-form-item :label="$t('intelligentQualityCheck.intelAppealType')">
                <el-select size="mini" v-model="appealform.AppealType" :placeholder="$t('public.pleasePick')">
                  <el-option
                    v-for="(item, index) in AppealTypeList"
                    :key="index"
                    :label="item.name"
                    :value="item.key">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item :label="$t('intelligentQualityCheck.intelAppealTime')">
                <div style="padding-top: 3px;">
                  <el-date-picker size="mini"
                                  :id="['z1','z2']"
                                  v-model="appealform.appealTime"
                                  :editable="boolean"
                                  type="datetimerange"
                                  :picker-options="pickerOptions"
                                  :placeholder="$t('public.timeRanges')"
                                  align="right"
                                  @change="appealTimeChange">
                  </el-date-picker>
                </div>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item :label="$t('qualityCheck.qualityControlPersonnel')">
                <el-select size="mini" v-model="appealform.GRADE_USER" multiple filterable :placeholder="$t('public.pickAgentTip1')">
                  <el-option
                    v-for="(item, index) in appealAgentList"
                    :key="index"
                    :label="item.displayName + '[' + item.exten + ']'"
                    :value="item._id">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item :label="$t('intelligentQualityCheck.intelAppealAgent')">
                <el-popover
                  ref="popover4"
                  placement="bottom"
                  @show="popoverShow"
                  width="240"
                  trigger="click">
                  <agent-tree :readSeat="folllowedAgents" ref="agentTree" @saveFollowedAgents="saveFollowedAgents"></agent-tree>
                </el-popover>
                <div class="follow-agent-wrap" v-popover:popover4>
                      <span class="follow-agent follow-common" v-for="item in folllowedAgents" :key="item._id">{{item.label}}
                        <i class="el-icon-close" @click.stop="closeFollowedAgents(item._id)"></i>
                      </span>
                  <div>
                    <span type="primary" class="follow-agent-wrap-btn"><i class="el-icon-arrow-down" style="color: #c0c4cc"></i></span>
                  </div>
                </div>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="6">
              <el-form-item :label="$t('qualityCheck.qualityGrade')">
                <!--<el-select size="mini" v-model="appealform.AppealGetGrade" multiple filterable placeholder="请选择申诉类型">-->
                  <!--<el-option-->
                    <!--v-for="(item, index) in AppealGetGradeList"-->
                    <!--:key="index"-->
                    <!--:label="index"-->
                    <!--:value="index">-->
                  <!--</el-option>-->
                <!--</el-select>-->
                <el-input size="mini" v-model.trim="appealform.gradeStart" style="width: calc(50% - 23px)">
                  <!--<template slot="append">分</template>-->
                </el-input>
                <span class="line"></span>
                <el-input size="mini" v-model.trim="appealform.gradeEnd" style="width: calc(50% - 23px)">
                  <!--<template slot="append">分</template>-->
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item :label="$t('public.customerName')+':'">
                <el-input size="mini" v-model.trim="appealform.customerName" :placeholder="$t('public.pleaseEnter')"></el-input>
              </el-form-item>
            </el-col>
            <!-- 会话ID -->
            <el-col :span="6">
              <el-form-item :label="$t('qualityCheck.sessionId')">
                <el-input size="mini" v-model.trim="appealform.chatSessionId " :placeholder="$t('public.pleaseEnter')"></el-input>
              </el-form-item>
            </el-col>
            <!-- 通话编号 -->
            <el-col :span="6">
               <el-form-item :label="$t('call.callNumber')+':'">
                  <el-input size="mini" v-model.trim="appealform.call_sheet_id" :placeholder="$t('public.pleaseEnter')"></el-input>
                </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <div class="sub">
        <el-button type="primary" class="primary_btn fr ml10" @click="queryList">{{$t('public.search2')}}</el-button>
        <el-button class="primary_btn fr" style="margin-right: 20px;" @click="resetCondition">{{$t('public.reset')}}</el-button>
      </div>
      <affix :label="$t('public.searchResult')" style="padding-bottom: 0px;"></affix>
      <callDetails :callDialogShow="callDialogShow" v-if="callDetailsIsShow"
                   :appealFlag="true"
                   @close="off" :flagId="flagId" :reGrade="true"
                   :currentItemCall = "this.currentItemCall"
                   @saveGrade="saveGrade" :qcResectLabel="qcResectLabel" @off="off"
                   :ruleRender="ruleRender"
                   :template = "this.template" @handle="handle" :refreshCallGrade="refreshCallGrade" :disabled="lookGrade"
                   @checkResultFun="checkResultFun"
                   @rejectFun="rejectFun"
                   @channelFun="callDetaillChannel" @giveUpResult="giveUpCallResult"></callDetails>
      <webChatDetails :webchatDialogShow="webchatDialogShow" v-if="webChatDetailsIsShow"
                      :appealFlag="true"
                      @close="off" :reGrade="true" :currentGrade = "currentGrade"
                      :currentItemWebchat="this.currentItemWebchat"
                      :currentItemSny = "currentItemWebChat" @off="off" @handle="handle" @channelFun="channelWebChatFun"
                      @rejectFun="rejectFun"
                      @saveGrade="saveGrade" @giveUpResult="giveUpWebResult" @checkResultFun="checkResultFun"></webChatDetails>
      <div class="quality-check-realust-table">
        <div class="deploy">
          <div class="search-pagination">
            <pagination
              :small="paginationRecord.small"
              :currentPage="paginationRecord.currentPage"
              :count="countRecord"
              @turnPage="turnPageRecord"
              :totalPage="totalPageRecord"
            >
            </pagination>
          </div>
        </div>
        <appealTable :tableData="appealTableData" @rejectAppeal="rejectAppealShow" @reGrade="reGradeFun" @ListenRecording="ListenRecordingShow"></appealTable>
      </div>
      <!--质检驳回   弹窗===========-->
      <el-dialog :close-on-click-modal="false" modal-append-to-body lock-scroll top="10%" :visible.sync="isShowRejectAppealDialog" :title="$t('intelligentQualityCheck.intelRejectQc')" @close="offRejectAppealDialog">
        <div>
          <el-input
            type="textarea"
            :rows="3"
            :placeholder="$t('public.pleaseEnter')"
            v-model="rejectComment">
          </el-input>
          <div style="clear: both;padding: 20px 0;overflow: hidden;">
            <el-button type="primary" class="primary_btn fr" style="float: right;" @click="rejectAppealSave">{{$t('public.confirm')}}</el-button>
          </div>
        </div>
      </el-dialog>
      <!--听取录音  弹窗 === = = = ========-->
      <el-dialog modal-append-to-body lock-scroll top="10%" :visible.sync="isShowListen" :title="$t('qualityCheck.ListenToTheRecording')" @close="offAudio" @open="openAudio">
        <old-audio-common v-if="showOld" flagId="appel_result_listen_old" :srcUrl="audioListen" :refreshAudio="refreshAudio" :isShowAudioDownload="false" :isShowSubmitAudio="false" :currentObj="{}" :pauseAudio="pauseAudio"></old-audio-common>
        <audio-common v-if="!showOld" flagId="appel_result_listen" @showOldAudio="showOldAudio" callStatus='dealing' :srcUrl="audioListen" :refreshAudio="refreshAudio" :isShowAudioDownload="false" :isShowSubmitAudio="false" :currentObj="{}" :pauseAudio="pauseAudio"></audio-common>
      </el-dialog>
    </div>
</template>

<script>
  import affix from '../../../ui-modules/affix/Affix'
  import AgentTree from '../../qualityCheck/base/qualityAgentTree'
  import appealTable from '../qualityTable/appealTable'
  import Pagination from '@/components/public-modules/card/Pagination'
  import AudioCommon from '@/components/public-modules/audio'
  import OldAudioCommon from '@/components/public-modules/audio/audio.vue'
  import callDetails from './qualityCheckResultCallDetails'
  import webChatDetails from './qualityCheckResultWebChatDetails'
  import bus from '@/store/eventBus'
  import * as webchatUtils from '@utils/webchat.js'
    import {checkform} from '@/utils/validate'
  import {deepClone, scopeAgents, getDateTime, getCache, initFinishName} from '@/utils/m7Utils'
  export default {
    name: 'qualityCheckResultAppeal',
    data () {
      return {
        showOld: false,
        pauseAudio: 'open',
        boolean: false,
        lookGrade: false,
        callDialogShow: false, // 通话详情弹框
        webchatDialogShow: false, // 在线详情弹窗
        currentItemCall: {}, // 通话数据详情
        currentItemWebChat: {}, // 在线数据详情
        currentGrade: {}, // 当前评分
        flagId: 'result', // 详情弹框类型判断
        qcResectLabel: false,
        template: {},
        callDetailsIsShow: false,
        currentItemWebchat: {},
        refreshCallGrade: 0,
        webChatDetailsIsShow: false, // 在线详情是否展示
        templateTitle: 'callTemplate',
        appealform: { // 表单
          AppealType: '', // 申诉类型
          appealTime: '', // 申诉时间
          DISPOSAL_AGENT: '', // 申诉座席
          GRADE_USER: [], // 质检人员
          refreshCallGrade: 0,
//          AppealGetGrade: '', // 质检得分类型
          gradeStart: '', // 质检得分
          gradeEnd: '', // 质检得分
          customerName: '', // 客户名称
          chatSessionId : '', // 会话ID
          call_sheet_id: '' // 通话编号
        },
        pickerOptions: { // 申诉时间
          shortcuts: [{
            text: this.$t('sms.thisOneWeek'),
            onClick (picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', [start, end])
            }
          }, {
            text: this.$t('sms.thisOneMonth'),
            onClick (picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              picker.$emit('pick', [start, end])
            }
          }, {
            text: this.$t('sms.thisThreeMonth'),
            onClick (picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
              picker.$emit('pick', [start, end])
            }
          }]
        },
        AppealTypeList: [
          {
            'name': this.$t('public.all'),
            'key': ''
          },
          {
            'name': this.$t('intelligentQualityCheck.intelCallQuality'),
            'key': 'call'
          },
          {
            'name': this.$t('intelligentQualityCheck.intelWebChatQuality'),
            'key': 'webchat'
          }
        ], // 申诉类型
        appealAgentList: '', // 质检人员
//        AppealGetGradeList: [], // 质检得分
        appealTableData: [], // 申诉查询表格
        paginationRecord: { // 分页参数
          small: false,
          currentPage: 1
        },
        countRecord: 0, // 当前页
        totalPageRecord: 0, // 总条数
        isShowRejectAppealDialog: false,   //   驳回弹窗
        rejectComment: '',
        rejectId: '',
        isShowListen: false,   //   听取录音
        audioListen: '',
        refreshAudio: 0,
        finishOptions: {},          //  在线结束会话类型列表
        isGiveUpResult: false,
        ruleRender: []
      }
    },
    methods: {
      showOldAudio (curr) {
        this.showOld = curr
      },
      appealTimeChange (value) { // 申诉时间选择
        if (!value) {
          this.appealform.appealTime = ''
        }
      },
      popoverShow () { // 申诉座席展示
        this.$refs.agentTree.setCheckedKeys()
      },
      rejectAppeal (val) {
        this.rejectComment = val
        this.rejectAppealSave()
      },
      saveFollowedAgents (agents) {
        this.appealform.DISPOSAL_AGENT = deepClone(agents)
        document.getElementsByTagName('body')[0].click()
      },
      callDetaillChannel () {
        this.callDetailsIsShow = false
      },
      channelWebChatFun () {
        this.webChatDetailsIsShow = false
      },
      closeFollowedAgents (agent) { // 技能组
        this.appealform.DISPOSAL_AGENT = this.appealform.DISPOSAL_AGENT.filter((item) => item !== agent)
      },
      saveGrade () { // 详情保存
      },
      giveUpCallResult (val) {
        if (val && val.success) {
          this.$message({
            message: this.$t('intelligentQualityCheck.giveUpQcSuccess'),
            type: 'success'
          })
          this.callDetailsIsShow = false
          this.searchAppeal(this.paginationRecord.currentPage)
        } else {
          this.$message.error(val.message)
        }
      },
      giveUpWebResult (val) { // 放弃质检
        if (val && val.success) {
          this.$message({
            message: this.$t('intelligentQualityCheck.giveUpQcSuccess'),
            type: 'success'
          })
          this.webChatDetailsIsShow = false
          this.searchAppeal(this.paginationRecord.currentPage)
        } else {
          this.$message.error(val.message)
        }
      },
      checkResultFun (val) { // 详情确定
        // this.paginationRecord.currentPage = 1
        if (val.success) {
          this.searchAppeal(this.paginationRecord.currentPage)
          this.webchatDialogShow = false
          this.callDialogShow = false
          this.callDialogShow = false
          this.$message({message: this.$t('intelligentQualityCheck.regradeSuccess'), type: 'success'})
        }
      },
      handle () {},
      off () { // 详情关闭
        let play = document.getElementById('quality-autoplay_' + this.flagId + '_old')
        if (play) {
          play.pause()
        }
        this.webchatDialogShow = false
        this.callDialogShow = false
      },
//      重置  搜索条件  ========= = = = ====   ============
      resetCondition () {
        this.appealform.AppealType = ''
        this.appealform.GRADE_USER = []
        this.appealform.DISPOSAL_AGENT = []
        this.$refs.agentTree.setCheckedKeys()
        this.appealform.gradeStart = ''
        this.appealform.gradeEnd = ''
        this.appealform.appealTime = ''
        this.appealform.customerName = ''
        this.appealform.chatSessionId = ''
        this.appealform.call_sheet_id = ''
      },
      queryList () {
        this.paginationRecord.currentPage = 1
        this.searchAppealList()
      },
//      搜索列表   ==========
      searchAppealList (page) {
        if (this.appealform.gradeStart !== '' || this.appealform.gradeEnd !== '') {
          let test = checkform(this.appealform.gradeStart, 'Number2')
          let test1 = checkform(this.appealform.gradeEnd, 'Number2')
          if (parseFloat(this.appealform.gradeStart) > 100 || parseFloat(this.appealform.gradeEnd) > 100) {
            this.$message.error(this.$t('intelligentQualityCheck.intelGradeThanMax'))
          }
          if (test || test1) {
            this.$message({
              type: 'error',
              message: this.$t('intelligentQualityCheck.intelTestNum')
            })
            return false
          }
        }
        this.searchAppeal(page || 1)
      },
      turnPageRecord (page) { // 分页
        this.paginationRecord.currentPage = page
        this.searchAppeal(page)
      },
      searchAppeal (page) {
        let data = {}
        data.page = page
        data.limit = 10
        data.type = this.appealform.AppealType
        data.status = ''
        data.gradeUser = this.appealform.GRADE_USER
        data.createUser = this.appealform.DISPOSAL_AGENT
        data.gradeAmountStart = this.appealform.gradeStart
        data.gradeAmountEnd = this.appealform.gradeEnd
        if(this.appealform.customerName){
          data.customerName = this.appealform.customerName
        }
        if(this.appealform.chatSessionId){
          data.chatSessionId = this.appealform.chatSessionId
        }
        data.call_sheet_id = this.appealform.call_sheet_id
        if (this.appealform.appealTime && this.appealform.appealTime[0] !== null) {
          data.createTimeStart = getDateTime(this.appealform.appealTime[0])
        }
        if (this.appealform.appealTime && this.appealform.appealTime[1] !== null) {
          data.createTimeEnd = getDateTime(this.appealform.appealTime[1])
        }
        let agents = this.$store.getters.agents
        this.$store.dispatch('getQualityCheckQuaryResultAppealList', data).then(res => {
          if (res.success) {
            this.countRecord = res.count
            this.totalPageRecord = Math.ceil(res.count / data.limit)
            const list = res.data || []
            if (list.length === 0) {
              if (!res.count) {
                // 第一页且count为0是不再发请求
                this.paginationRecord.currentPage = 1
              } else {
                let page = Math.ceil(res.count / data.limit)
                this.paginationRecord.currentPage = page
                this.turnPageRecord(page)
                return false
              }
            }
            list.forEach(item => {
              if (agents[item.createUser] && agents[item.createUser].displayName) {
                item.createUser_show = agents[item.createUser].displayName
              }
              if (agents[item.gradeUser]) {
                item.gradeUser_show = agents[item.gradeUser].displayName
              }
              item.type_show = item.type === 'call' ? this.$t('public.call') : this.$t('public.webchat')
              item.customerName = item.customerName || item.sName
            })
            this.appealTableData = list
          }
        })
      },
      rejectAppealShow (data) {
        this.rejectId = data._id
        this.isShowRejectAppealDialog = true
      },
      rejectFun (id) { // 详情驳回
        this.isShowRejectAppealDialog = true
        this.rejectId = id
      },
      offRejectAppealDialog () {
        this.rejectComment = ''
        this.isShowRejectAppealDialog = false
      },
      reGradeFun (data) { // 复核详情
        let self = this
        if (data.type === 'webchat') {
          let agents = this.$store.getters.agents || {}
          this.webchatDialogShow = true
          this.$store.dispatch('IntelligentQualityCheckResultAllWebDetails', data.result).then(res => {
            if (res.data === 'result_not_found') {
              let UpdateAppealStatus = {}
              this.webchatDialogShow = false
              UpdateAppealStatus._id = data._id
              UpdateAppealStatus.status = 'invalid'
              this.$alert(this.$t('intelligentQualityCheck.intelGiveUpQualityResult'), this.$t('public.tip'), {
                confirmButtonText: this.$t('notify.iKnow'),
                callback: action => {
                  this.$store.dispatch('IntelligentQualityAppealUpdateAppealStatus', UpdateAppealStatus).then((res) => {
                    if (res.success) {
                      this.searchAppeal(this.paginationRecord.currentPage)
                    }
                  })
                }
              })
            } else {
              if (res.ruleResults) {
                let nomalScore = 0
                res.ruleResults.map(item => {
                  item.hitCount = '共' + item.hitCount + '次命中'
                  if (!item.isCanceled) {
                    nomalScore += Number(item.scoreItem.split(',')[1])
                  }
                })
                res.nomalScore = res.gradeAmount - nomalScore
              }
              let p1 = this.$store.dispatch('queryBusiness', {linkWebchat: data.result, sid: data.sid})
              let p2 = this.$store.dispatch('popupWebchatById', {_id: data._id, sid: data.sid})
              Promise.all([p1, p2]).then(([response, resp]) => {
                self.currentItemWebChat = res
                if (response && response.length > 0) {
                  self.currentItemWebChat.busHistory = [response[0]]
                } else {
                  self.currentItemWebChat.busHistory = []
                }
                if (resp.row) {
                  self.currentItemWebChat.sName = resp.row.name
                  self.currentItemWebChat.custName = resp.row.name
                }
                if (self.currentItemWebChat.dialogues && self.currentItemWebChat.dialogues.length) {
                  self.currentItemWebChat.dialogues.forEach(item => {
                    if (item.contentType === 'text') {
                      if (item.showHtml === 'true' || (typeof item.showHtml === 'boolean' && item.showHtml)) {
                        self.$set(item, 'content', item.text)
                      } else {
                        self.$set(item, 'content', webchatUtils.renderEmoji(item.text))
                      }
                    } else if (item.contentType === 'file') {
                      self.$set(item, 'fileName', webchatUtils.transferFileContent(item.message))
                    }
                  })
                }
                self.currentItemWebChat.rejectId = data._id
                if (agents[this.currentItemWebChat.user] && agents[this.currentItemWebChat.user].displayName) {
                  self.currentItemWebChat.user = agents[this.currentItemWebChat.user].displayName // 通话座席
                }
                if (agents[this.currentItemWebChat.gradeUser] && agents[this.currentItemWebChat.gradeUser].displayName) {
                  this.currentItemWebChat.gradeUser_show = agents[this.currentItemWebChat.gradeUser].displayName // 通话座席
                } else {
                  this.currentItemWebChat.gradeUser_show = ''
                }
                if (self.currentItemWebChat.finishKey) {
                  self.currentItemWebChat.finishReasonTitle = self.finishOptions[self.currentItemWebChat.finishKey] || ''
                } else {
                  self.currentItemWebChat.finishReasonTitle = ''
                }
                self.webChatDetailsIsShow = true
                self.callDetailsIsShow = false
                bus.$emit('intelQualityEnterWebDeltails')
              })
//              this.$store.dispatch('queryBusiness', {linkWebchat: data.result, sid: data.sid}).then((response) => {
//                if (response && response.length > 0) {
//                  data.busHistory = [response[0]]
//                } else {
//                  data.busHistory = []
//                }
//                this.currentItemWebchat = data
//              })
//              this.$store.dispatch('popupWebchatById', {_id: data._id, sid: data.sid}).then((resp) => {
//                if (resp.row) {
//                  this.currentItemWebChat.sName = resp.row.name
//                  this.currentItemWebChat.custName = resp.row.name
//                }
//              })
            }
          })
        } else {
          this.webchatDialogShow = false // 在线详情弹窗
          this.callDialogShow = true // 通话详情弹框
          if (data.REPEAT_CALL) {
            data.repeatCall = data.REPEAT_CALL === '48h' ? this.$t('call.repeatCall48h') : this.$t('call.repeatCall24h')
          } else {
            data.repeatCall = '--'
          }
          this.$store.dispatch('IntelligentQualityCheckResultAllDetails', data.result).then((response) => {
            if (response.data === 'result_not_found') {
              let UpdateAppealStatus = {}
              this.callDialogShow = false
              UpdateAppealStatus._id = data._id
              UpdateAppealStatus.status = 'invalid'
              this.$alert(this.$t('intelligentQualityCheck.intelGiveUpQualityResult'), this.$t('public.tip'), {
                confirmButtonText: this.$t('notify.iKnow'),
                callback: action => {
                  this.$store.dispatch('IntelligentQualityAppealUpdateAppealStatus', UpdateAppealStatus).then((res) => {
                    if (res.success) {
                      this.searchAppeal(this.paginationRecord.currentPage)
                    }
                  })
                }
              })
            } else {
              if (response.ruleResults) {
                let nomalScore = 0
                response.ruleResults.map(item => {
                  item.hitCount = '共' + item.hitCount + '次命中'
                  if (!item.isCanceled) {
                    nomalScore += Number(item.scoreItem.split(',')[1])
                  }
                })
                response.nomalScore = response.gradeAmount - nomalScore
              }
              this.$store.dispatch('queryBusiness', {callId: data.call_sheet_id, customer: data.CUSTOMER_ID}).then((res) => {
                this.recordFileName(response.fileServer, response.recordFileName, response.PBX, function (url) {
                  response.audio = url
                  if (res && res.length > 0) {
                    response.busHistory = [res[0]]
                  } else {
                    response.busHistory = []
                  }
                  self.currentItemCall = response
                  if (self.currentItemCall.satisfaction === '1') {
                    self.currentItemCall.satisfaction = self.$t('intelligentQualityCheck.intelSatisfied')
                  } else if (self.currentItemCall.satisfaction === '2') {
                    self.currentItemCall.satisfaction = self.$t('intelligentQualityCheck.intelDissatisfied')
                  }
                  self.currentItemCall.rejectId = data._id
                  self.refreshCallGrade = Math.random()
                  self.callDetailsIsShow = true
                  self.webChatDetailsIsShow = false
                  bus.$emit('intelQualityEnterCallDeltails')
                })
              })
            }
          })
        }
      },
      recordFileName (server, name, pbx, callBack) {
        if (!server) {
          callBack('')
          return
        }
        if (server.indexOf('record.7moor.com') > -1 || server.indexOf('m7-record.oss-cn-hangzhou') > -1 || server.indexOf('aliyuncs.com') > -1) {
          server = 'https' + server.substr(server.indexOf(':'), server.length)
          callBack(server + '/' + name)
        } else if (document.location.protocol === 'https:') {
          if (pbx) {
            getCache('accountPbx', pbx, this, function (pbxObj) {
              if (pbxObj) {
                if (pbxObj.assDomain) {
                  let assDomain = pbxObj.assDomain
                  if (assDomain.substr(assDomain.length - 1, assDomain.length) === '/') {
                    assDomain = assDomain.substr(0, assDomain.length - 1)
                  }
                  server = assDomain
                }
              }
              callBack(server + '/' + name)
            })
          } else {
            callBack(server + '/' + name)
          }
        } else {
          callBack(server + '/' + name)
        }
      },
      rejectAppealSave () {
        this.$store.dispatch('rejectAppeal', {appeal: this.rejectId, comment: this.rejectComment}).then(res => {
          if (res.success) {
            this.callDialogShow = false // 通话详情弹框
            this.webChatDetailsIsShow = false
            this.$message.success(this.$t('intelligentQualityCheck.intelRejectQcSuccsee'))
            this.offRejectAppealDialog()
            this.searchAppealList(this.paginationRecord.currentPage)
          }
        })
      },
      ListenRecordingShow (value) {
        this.$store.dispatch('recordListenLog', {CALL_SHEET_ID: value._id}).then((res) => {
          this.isShowListen = true
          this.audioListen = value.path
          this.refreshAudio = Math.random()
        })
      },
      offAudio () {
        let play = document.getElementById('quality-autoplay_appel_result_listen_old')
        if (play) {
          play.pause()
        }
        this.pauseAudio = 'close'
      },
      openAudio () {
        this.pauseAudio = 'open'
      }
    },
    created () {
      let self = this
      // 质检人员 start
      this.$store.dispatch('getCache', {type: 'agents'}).then((res) => {
        let agents = scopeAgents('qc', res)
        agents.forEach((item) => {
          item.labelCall = item.displayName + '【' + item.exten + '】'
        })
        self.appealAgentList = agents
        self.agentList = agents
      })
      // 质检人员 end
    },
    computed: {
      folllowedAgents () {
        let agents = this.appealform.DISPOSAL_AGENT || []
        let agentsAll = this.$store.getters.agents || {}
        return agents.map((item) => {
          if (agentsAll[item]) {
            return {_id: item, label: agentsAll[item].displayName}
          } else {
            return {_id: item, label: this.$t('intelligentQualityCheck.intelDetelAgents')}
          }
        })
      }
    },
    components: {
      affix,
      AgentTree,
      appealTable,
      Pagination,
      AudioCommon,
      OldAudioCommon,
      webChatDetails,
      callDetails
    },
    beforeMount () {
      this.searchAppealList()
      let data = {
        page: 1,
        pageSize: 200
      }
      // 渲染质检辅助信息
      this.$store.dispatch('getMarkRuleListConfig', data).then(res => {
        if (res.success) {
          res.data = res.data.filter((item) => {
            return item.type === 'call' && item.isEnable
          })
          this.ruleRender = deepClone(res.data)
        }
      })
      this.$store.dispatch('getCache', {type: 'channelDic'}).then((dics) => {
        let _dics = []
        for (var i = 0; i < dics.length; i++) {
          let obj = dics[i]
          if (obj.type === 'webchat') {
            _dics = obj.options || []
            break
          }
        }
        this.finishOptions = initFinishName(_dics, {})
      })
    }
  }
</script>

<style lang="stylus" scoped>
  @import "../../../../assets/common.styl"
    .quality-check-resultAppeal
      height: calc(100vh - 144px)
      padding 20px
      width calc(100%)
      overflow-y auto
      overflow-x hidden
      box-sizing border-box
      .sub
        overflow hidden
        margin 20px 0
      .el-form-item
        width 100%
        height 100%
        .el-select, .el-date-editor, .el-input
          width 100%
          height 100%
      .line
        width: 20px;
        height: 1px;
        background-color: #dcdfe6;
        display: inline-block;
        margin: 0 12px;
      .follow-agent-wrap
        float left
        cursor pointer
        width: 300px
        border-radius: 5px
        border: 1px solid #dcdfe6
        padding: 6px 9px 6px 5px
        margin-top: 7px
        overflow: hidden
        .follow-common
          float left
          position relative
          line-height 24px
          background-color #7ab8f3
          margin 0 0 10px 10px
          padding 0 10px
          color #fff
          border-radius 4px
        .follow-agent-wrap-btn
          display block !important
          line-height 0px
          float right
          cursor pointer
          color $c-main
      .quality-check-realust-table
        /*height calc(100vh - 90px)*/
        padding 0px 20px 0
        overflow scroll
        .search-pagination
          margin: 10px 0px 0px 20px
          float right
        .deploy-btn
          margin-top 10px
        .deploy
          text-align right
          height 48px
          border-bottom none
          padding-left 14px
</style>
